<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/6.css">
</head>
<body>
    <div class="box">
        <div class="title">
            <!-- <span class="active">薛之谦</span> -->
        </div>

        <div class="con">
            <!-- <div class="show">
                <p></p>
            </div>
            <div>
                <p></p>
            </div>
            <div>
                <dl>
                    <dt><img src="./img/1.jpg"></dt>
                    <dd>的合金变成基督教是</dd>
                </dl>
            </div>
            <div>
                <dl>
                    <dt><img src="./img/1.jpg"></dt>
                    <dd>的合金变成基督教是</dd>
                </dl>
            </div> -->
        </div>
    </div>
    <script src="./js/6Data.js"></script>
    <script>
        // 1 获取元素
        var tit = document.querySelector(".title");
        var con = document.querySelector(".con") ;
        var titStr = ""; //用于拼接标题
        var curI = 3;  // 初始化下标  用于默认初始展示
        // 2 渲染内容
        con.innerHTML = data.map(function(obj , i){
            // 再循环渲染 内容的同时 拼接标题
            titStr += `<span class="${curI === i ? 'active' : ''}">${obj.tit}</span>`
            return `
                <div class="${curI === i ? 'show' : ''}">
                    ${obj.con.map(function(item){
                        // 判断当前项 是字符串 直接 p 返回    否则 dl返回
                        return typeof item === "string" ? `<p>${item}</p>` : `
                            <dl>
                                <dt><img src="${item.src}"></dt>
                                <dd>${item.des}</dd>
                            </dl>
                            `
                    }).join("")}
                </div>
            `
        }).join("")
        tit.innerHTML = titStr

        // 获取所有标题  和  内容
        var tits = tit.querySelectorAll("span");
        var cons = con.querySelectorAll("div");
        // // console.log(tits , cons)
        // // 给每个标题span 绑定点击事件  即 循环绑定
        tits.forEach(function(span , i){
            span.onclick = function(){
                // 排他思想 干掉 别人 保留自己
                // 即 先把之前存在的高亮和 对应的内容消失
                document.querySelector(".active").classList.remove("active")
                document.querySelector(".show").classList.remove("show")
                // 给正在点击的添加高亮 且 对应的内容显示
                span.classList.add("active")
                cons[i].classList.add("show")
            }
        })
    </script>
</body>
</html>